<template>
  <div class="modal-overlay" v-if="visible" @click.self="closeModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3>选择文章类型</h3>
        <button class="close-btn" @click="closeModal">&times;</button>
      </div>
      <div class="modal-content">
        <div class="radio-group">
          <div class="radio-option" 
            v-for="option in articleTypes" :key="option.id"
            :class="{ 'selected': selectedType === option.name }"
            @click="selectType(option.id)"
          >
            <div class="radio-circle">
              <div class="radio-inner" v-if="selectedType === option.id"></div>
            </div>
            <div class="option-content">
              <h4>{{ option.name }}</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" @click="closeModal">取消</button>
        <button class="confirm-btn" @click="confirmSelection" :disabled="!selectedType">确认</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { watch } from 'vue';
import { getAllType } from '@/api/BlogVisit';
import { articleDetail } from '@/api/BlogVisit';
import { setArticleType } from '@/api/BlogUser';
import server from '@/api/server';



const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentArticleId: {
    type: Number,
    default: 0
  }
});

const articleTypes = ref([
  {
    id: 0,
    name: 'news',
  }
]);

watch(() => props.visible,  (newVal) => {
  if (newVal) {
    getTypes()
  }
});

const getTypes = ()=>{
  try {
    getAllType().then((res)=>{
      if(res.data.code == 0){

        articleTypes.value = res.data.data
        getArticle()

      }else{

        alert("获取失败："+res.data.msg);

      }
    })
  } catch (error) {

    alert("获取失败："+ error);
    
  }
}

const getArticle = ()=>{
  const params = {
    articleId: props.currentArticleId
  }
  try {
    articleDetail(server.token, params).then((res)=>{
      if(res.data.code == 0){

        selectedType.value = res.data.data.typeId

      }else{

        alert("获取失败："+res.data.msg);

      }
    })
  } catch (error) {

        alert("获取失败："+ error);
    
  }
}

const confirmSelection = () => {
  if (selectedType.value) {
    const params = {
      articleId: props.currentArticleId,
      typeId: selectedType.value
    }
    try {
      setArticleType(server.token, params).then((res)=>{
        console.log(res.data)
        if(res.data.code == 0){

          alert("修改文章分类成功：" + res.data.data)
          emit('type-selected', selectedType.value);
          closeModal();

        }else{

          alert("修改文章分类失败："+ res.data.msg)
          
        }
      })
    } catch (error) {

      alert("修改文章分类失败："+error)
      
    } 
  }
};






const emit = defineEmits(['update:visible', 'type-selected']);

const selectedType = ref(null);

const closeModal = () => {
  props
  emit('update:visible', false);
  resetState();
};

const resetState = () => {
  selectedType.value = null;
};

const selectType = (typeId) => {
  selectedType.value = typeId;
};


</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.close-btn:hover {
  color: #666;
}

.modal-content {
  padding: 20px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
}

.radio-option:hover {
  border-color: #c0c0c0;
  background-color: #f9f9f9;
}

.radio-option.selected {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #c0c0c0;
  margin-right: 12px;
  margin-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.radio-option.selected .radio-circle {
  border-color: #409eff;
}

.radio-inner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #409eff;
}

.option-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.option-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #666;
}

.cancel-btn:hover {
  background-color: #eaeaea;
}

.confirm-btn {
  background-color: #409eff;
  border: 1px solid #409eff;
  color: white;
}

.confirm-btn:disabled {
  background-color: #a0cfff;
  border-color: #a0cfff;
  cursor: not-allowed;
}

.confirm-btn:not(:disabled):hover {
  background-color: #3080e0;
  border-color: #3080e0;
}
</style>